<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作 DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi minima dolorem nemo nobis corrupti aut sint, explicabo iure, qui dignissimos exercitationem voluptate! Reprehenderit quasi aspernatur debitis, atque omnis natus rem.</p>
		<div><span>Lorem</span></div>
		<div style="width: 100px ;height: 100px; background: #000;"></div>
		<span>文本</span>
		
		<br />
		<input type="button" value="按钮2"/>
		<input type="text" />
		<script>
			/*  javaScript：基础语法+* DOM(页面)+BOM(浏览器)
			JQuery操作DOM方式【7种方式  36个函数】--改变页面效果
			1.元素内容操作：操作元素和元素内容的方式【3个函数】
			.html()
			.val()
			.text()
			2.元素属性操作：操作元素属性【固定属性、附加属性】【4个函数】
			.attr()
			.removeAttr()
			.prop()
			.removeProp()
			3.元素类名操作：操作样式【4个函数】
			addClass（）
			removeClass()
			toggleClass()
			hasClass()
			4.元素样式【尺寸】操作 ：【5个函数】
			css()
			width和height
			outwidth()和outheight()
			5.元素删除和插入操作：【7个函数】
			append()和prepend()
			after()和before()
			remove()和empty()
			replaceWith()
			6.元素遍历操作：【6个函数】
			children() parent()
			siblings()
			next()prev()
			each()
			7.动画操作：【7个函数】
			show() hide()
			slideDown()  slideUp()
			fadeIn() fadeOut()
			hover()
			*/
			
			/*JQuery操作 DOM 通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数  增加一个元素  覆盖原来的html
			.val（）函数  input元素使用 改变修改表单元素中的文本
			*/
			//$('button').click(function(){
				//DOM 操作---改变页面其他元素
				//DOM 操作---改变p元素改成marquee元素
			//	$('p').html("<marquee>你好</marquee>");
			//});
			// 100*100  div  鼠标移动上去 改变下面  超文本
			$("div").mouseenter(function(){
				$('span').html("<a href='#'>超文本</a>")
			});
			//按钮和输入框 点击按钮 输入框出现文字效果
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果")
			});
			
			
			
			
			$("button").click(function(){
				 var rem=$("select").val("rem1");
				 alert("val()函数有参："+rem);
			});
		</script>
	</body>
</html>